import Vue from 'vue';
import { _ } from 'vue-underscore';
import {
	Msg
} from '@/utils/resetMessage.js';
import suc from '../assets/images/alert-succ.png';
import err from '../assets/images/alert-fail.png';
import war from '../assets/images/alert-comfig.png';
/*
 *传参格式
 *type: 'success'|| 'error' || 'warning'
 *content: 操作以后的结果内容, eg: 您已成功删除
 *callback: 关闭弹窗之后需要做什么
 *log: 操作失败之后的日志信息
 */
const _dialog = function (type, content, callback, log) {
	var tmp = '';
	switch (type) {
	case 'success':
		tmp =
              `<div v-if="showStatus">
                    <div class="shadow" style="display:block"></div>
                    <div class="custom-alert">
                        <img src=` + suc +` />
                        <div style="margin-top:-14px;">
                            <h4 class="color-green">恭喜您，操作成功</h4>
                            <p class="mgt-10 color-999"> {{d_content}} </p>
                            <button class="btn btn-blue mgt-15 js_suve"  @click='btnOk'>确定</button>
                        </div>
                    </div>
                </div>`;
		break;
	case 'error':
		if (_.isEmpty(log)) {
			tmp = `<div v-if="showStatus">
                    <div class="shadow" style="display:block"></div>
                    <div class="custom-alert">
                        <img src=` + err + ` />
                        <div style="margin-top:-14px;">
                            <h4 class="color-red"> 操作失败 </h4>
                            <p class="mgt-10 color-999"> {{d_content}} </p>
                            <button class="btn btn-blue mgt-15 js_suve"  @click='btnOk'>确定</button>
                        </div>
                    </div>
                </div>`;
		} else {
			tmp =
                  `<div v-if="showStatus">
                    <div class="shadow" style="display:block"></div>
                    <div class="custom-alert">
                        <img src=` + err + ` />
                        <div style="margin-top:-14px;">
                            <h4 class="color-red"> 操作失败 </h4>
                            <p class="mgt-10 color-999"> {{d_content}} </p>
                            <p class="mgt-15 color-999 textins" v-show=showTip>{{d_log}}</p>
                            <div class="mgt-15">
                                <button class="btn btn-gray2 mgr-5 js_suve" @click="showTip = !showTip">详情</button>
                                <button class="btn btn-blue js_suve mgl-5" @click='btnOk'>确定</button>
                            </div>
                        </div>
                    </div>
                </div>`;
		}
		break;
	case 'warning':
		tmp = `<div v-if="showStatus">
                    <div class="shadow" style="display:block"></div>
                    <div class="custom-alert">
                        <img src=` + war +` />
                        <div style="margin-top:-14px;">
                            <h4 class="color-yellow">您确定怎么做吗？</h4>
                            <div class="mgt-15">
                                <button class="btn btn-gray2 js_suve mgr-5" @click="btnCancle">取消</button>
                                <button class="btn btn-blue js_suve mgl-5" @click='btnOk'>确定</button>
                            </div>
                         </div>
                    </div>
                </div>`;
		break;
	default:
		// alert('弹窗类型传错了');
		Msg.error('弹窗类型传错了');
		break;
	}

	var toastTpl = Vue.extend({
		data: function(){
			return {
				d_content: content,
				d_log: log,
				showStatus: true,
				showTip: false
			};
		},
		methods: {
			btnCancle: function () {
				this.closeDialog();
			},
			btnOk: function () {
				this.closeDialog();
				callback();
			},
			closeDialog: function () {
				this.showStatus = false;
			}
		},
		template: tmp
	});
	var toastVM = new toastTpl();
	var tpl = toastVM.$mount().$el;
	document.body.appendChild(tpl);

};

Vue.prototype.$showDialog = _dialog;

